/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:09:45
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-09 22:29:34
 * @FilePath: \Webgl-basic\src\6.绘制正三角形.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
    createBuffer,
} from '../lib/index'
import {
    mat4
} from 'gl-matrix';
import * as dat from 'dat.gui'
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/ `
  // 指定浮点数精度为中等精度  
  precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
  attribute vec3 a_Position;
  attribute vec3 a_Color;
  varying vec3 v_Color;
  uniform mat4 u_ViewMatrix;
  //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
  void main(){
    //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
    // gl_Position= vec4(a_Position,1.0);
    gl_Position= u_ViewMatrix * vec4(a_Position,1.0);
    v_Color = a_Color;

  }`
//片元着色器
const fs_shader = /*glsl*/ `
precision mediump float;
varying  vec3 v_Color;
void main(){
    //gl_FragColor是最后输出的像素颜色,是一个四维的数据
    gl_FragColor = vec4(v_Color,1.0);            
}`
//编译着色器,生成程序对象  操作手，专门负责javaScript和shader着色器的通讯
const program = initShader(gl, vs_shader, fs_shader)
gl.program = program;
const points = [
    0.0, 0.5, -0.4, -0.5, -0.5, -0.4, 0.5, -0.5, -0.4,
    0.5, 0.4, -0.2, -0.5, 0.4, -0.2, 0.5, -0.6, -0.2,
    0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0,
];
const colors = [
    0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 1.0, 0.4, 0.4,
    1.0, 0.4, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,
    0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 1.0, 0.4, 0.4,
];
const n = createBuffer(gl, points, 'a_Position', {
    size: 3
})
createBuffer(gl, colors, 'a_Color', {
    size: 3
})

//视点位置
const viewObj = {
    eyeX: 0,
    eyeY: 0,
    eyeZ: 1,
    lookAtX: 0,
    lookAtY: 0,
    lookAtZ: 0,
}
const renderView = () => {
    const u_ViewMatrix = gl.getUniformLocation(program, 'u_ViewMatrix')
    let viewMatrix = mat4.create();
    console.log("viewMatrix1", viewMatrix);
    mat4.identity(viewMatrix);
    viewMatrix = mat4.lookAt(viewMatrix, [viewObj.eyeX, viewObj.eyeY, viewObj.eyeZ], [viewObj.lookAtX, viewObj.lookAtY, viewObj.lookAtZ], [0, 1, 0])
    console.log("viewMatrix2", viewMatrix);
    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, n);
}
renderView()
const gui = new dat.GUI();
const eyeFolder = gui.addFolder('eyePosition');
eyeFolder.add(viewObj, 'eyeX', -1, 1, 0.01).onChange(renderView)
eyeFolder.add(viewObj, 'eyeY', -1, 1, 0.01).onChange(renderView)
eyeFolder.add(viewObj, 'eyeZ', -1, 5, 0.01).onChange(renderView)

const lookAtFolder= gui.addFolder('lookPostion');
lookAtFolder.add(viewObj,'lookAtX',0,1,0.01).onChange(renderView)
lookAtFolder.add(viewObj,'lookAtY',0,1,0.01).onChange(renderView)
lookAtFolder.add(viewObj,'lookAtZ',0,1,0.01).onChange(renderView)